<template>
  <el-dialog title="批量设置房间"
             v-if="volumeSetShow"
             :close-on-click-modal="false"
             :visible.sync="volumeSetShow"
             width="780px"
             :before-close="handleClose">
    <p>
      <span>楼栋信息：{{floorInfo.schoolAreaName}}>{{floorInfo.name}}>{{roomInfo.number}}栋{{roomInfo.unitNumber}}单元</span>
      <el-tag>{{roomInfo.roomTypeName}}</el-tag>
      <el-tag v-if="roomInfo.objectOrientedName">{{roomInfo.objectOrientedName}}</el-tag>
      <el-tag>{{$transSex(roomInfo.gender)}}</el-tag>
    </p>
    <el-row :gutter="20">
      <el-col :span="10">
        <div style="border: 1px solid #cccccc;padding:0 10px;height: 400px;overflow: auto;">
          <p>房间设置</p>
          <el-form :model="dialogForm"
                   ref="dialogForm"
                   :rules="rules"
                   label-width="100px">
            <el-form-item label="编号前缀："
                          prop="numberPrefix">
              <el-input v-model="dialogForm.numberPrefix"
                        type="number"
                        size="small"
                        placeholder="请输入编号前缀"></el-input>
            </el-form-item>
            <el-form-item label="编号位数："
                          prop="numberDigits">
              <el-input v-model="dialogForm.numberDigits"
                        type="number"
                        size="small"
                        placeholder="请输入编号位数"></el-input>
            </el-form-item>
            <el-form-item label="房间总数："
                          prop="totalRoomNum">
              <el-input v-model="dialogForm.totalRoomNum"
                        disabled
                        type="number"
                        size="small"
                        placeholder="请输入房间总数"></el-input>
            </el-form-item>
            <el-form-item label="床位数量："
                          prop="bedNum">
              <el-input v-model="dialogForm.bedNum"
                        type="number"
                        size="small"
                        placeholder="每个房间的床位数"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="14"
              style="border: 1px solid #cccccc;height: 400px;overflow: auto;">
        <p>楼层房间</p>
        <el-table :data="floorList"
                  class="table-header-gray">
          <el-table-column label="楼层"
                           prop="name"></el-table-column>
          <el-table-column label="房间数">
            <template slot-scope="scope">
              <input :min="0"
                     :maxlength="2"
                     type="number"
                     style="width: 80%;"
                     @change="roomNumChange(roomNumList[scope.$index], scope.$index)"
                     v-model="roomNumList[scope.$index]">
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="volumeSetSure"
                 size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    loading: Boolean,
    floorList: Array,
    roomNumList: Array,
    floorInfo: Object,
    roomInfo: Object,
    volumeSetShow: Boolean,
    dialogForm: {
      type: Object,
      default: () => ({ numberPrefix: null, numberDigits: null, totalRoomNum: 0, bedNum: null })
      // function () {
      //   return { numberPrefix: null, numberDigits: null, totalRoomNum: 0, bedNum: null }
      // }
    },
    schoolList: Array,
    volumeSetSure: Function,
    rules: Object
  },
  methods: {
    handleClose () {
      this.$refs.dialogForm.resetFields()
      this.$emit('handleClose')
    },
    roomNumChange (val, index) {
      if (/^[0-9]{1,3}$/.test(val)) {
        this.dialogForm.totalRoomNum = 0
        this.roomNumList.forEach(item => {
          this.dialogForm.totalRoomNum += Number(item)
        })
      } else {
        this.$message.error('房间数必须是3位以内的正整数')
        this.roomNumList[index] = 0
        val = 0
      }
    }
  }
}
</script>
